<template>
  <div>
    <el-page-header @back="goBack"  content="资产详情信息"></el-page-header>
    <el-divider content-position="left">
      <b>资产基本信息</b>
    </el-divider>
    <el-form :model="dataForm"  class="wds-form-top" label-width="150px">
      <el-row class="wds-frame">
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="资产名" prop="assetsName">
                {{dataForm.assetsName}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="资产编号" >
                {{dataForm.assetsNum}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="24">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="购入时间" prop="assetsBuytime">
                {{dataForm.assetsBuytime}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="使用人" prop="assetsAdmin">
                {{dataForm.assetsAdmin}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="备注" prop="assetsDesc">
               {{dataForm.assetsDesc}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row2" type="flex" >
          <el-col :span="5">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="资产图片" prop="assetsImg">
                <template >
                  <div style="display: flex; flex-direction: column; align-items: center;">
                    <img :src="dataForm.assetsImg"  style="max-width: 100%; max-height: 100px; object-fit: contain; margin-left: 10px;">
                  </div>
                </template>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="24">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </el-form>

    <el-divider content-position="left">
      <b>资产领用记录信息</b>
    </el-divider>
    <el-form :model="dataForm2" ref="dataForm2" class="wds-form-top" label-width="150px">
      <el-row class="wds-frame">
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="领用日期">
                {{dataForm2.receiveTime}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="申请领用说明" prop="signInTime">
                {{dataForm2.receiveDesc}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="资产状态" prop="minPay">
                <el-tag  v-if=" dataForm.assetsStatus ==0">待用</el-tag>
                <el-tag  v-if="dataForm2.createStatus == 0 && dataForm.assetsStatus !=0">领用审核中</el-tag>   <!--资产状态不是待用的时候-->
                <el-tag  v-if="dataForm2.createStatus == 3">报修审核中</el-tag>
                <el-tag type="success" v-if="dataForm2.createStatus == 1">使用中</el-tag>
                <el-tag type="warning" v-if="dataForm2.createStatus == 2">维修中</el-tag>
                <el-tag type="danger" v-if="dataForm2.createStatus == 7">已报废</el-tag>
                <el-tag type="info" v-if="dataForm2.createStatus == 4">不同意领用</el-tag>  <!--领用失败-->
                <el-tag type="danger" v-if="dataForm2.createStatus == 5">维修失败</el-tag>
                <el-tag type="info" v-if="dataForm2.createStatus == 6">已归还</el-tag>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="报废日期" prop="interviewStatus">
                {{dataForm2.scrapTime}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="领用审核人" prop="interviewStatus">
                  {{dataForm2.createBy}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="领用审核时间" prop="interviewScore">
                {{dataForm2.createTime}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="24">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="领用审核说明" prop="interviewStatus">
                {{dataForm2.autitorDesc}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="24">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </el-form>

    <el-divider content-position="left">
      <b>资产报修记录信息</b>
    </el-divider>
    <el-form :model="dataForm2" ref="dataForm2" class="wds-form-top" label-width="150px">
      <el-row class="wds-frame">
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="报修日期">
                {{dataForm2.repairsTime}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="申请报修说明" prop="signInTime">
                {{dataForm2.repairsDesc}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="报修审核人" prop="interviewStatus">
                {{dataForm2.createBy2}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="报修审核时间" prop="interviewScore">
                {{dataForm2.createTime2}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="24">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="报修审核说明" prop="interviewStatus">
                {{dataForm2.autitorDesc}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row2" type="flex">
          <el-col :span="5">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="报修附件" prop="assetsImg">
                <template >
                  <div style="display: flex; flex-direction: column; align-items: center;">
                    <img :src="dataForm2.repairsPic"  style="max-width: 100%; max-height: 100px; object-fit: contain; margin-left: 10px;">
                  </div>
                </template>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

      </el-row>
    </el-form>


  </div>
</template>

<script>
export default {
  data () {
    return {
      // 资产基本信息
      dataForm: {
        assetsId: 0,
        assetsName: '',
        assetsNum: '',
        assetsBuytime: '',
        assetsAdmin: '',
        assetsImg: '',
        assetsStatus: '',
        assetsDesc: ''
      },
      // 资产领用信息
      dataForm2: {
        receiveId: 0,
        assetsName: '',
        userName: '',
        receiveTime: '',   // 领用时间
        createBy: '',  // 领用审核人
        createTime: '',  // 领用审核时间
        receiveDesc: '', // 领用说明 申请人写的
        autitorDesc: '',  // 领用审核意见
        repairsDesc: '',  // 报修说明  申请人写
        createBy2: '', // 维修审核人
        autitorDesc2: '', // 维修审核意见
        createTime2: '', // 维修审核时间
        repairsTime: '', // 报修时间
        createStatus: '', // 审核状态
        repairsPic: '',  // 报修照片
        scrapTime: ''
      }
    }
  },
  methods: {
    goBack () {
      this.$emit('goBack')
    },
    init (row) {
      console.log(row, 'xx')
      // 基本资产信息
      this.dataForm = row
      // 资产领用信息
      this.dataForm2.receiveId = row.receiveId || 0
      this.$nextTick(() => {
        this.$refs['dataForm2'].resetFields()
        if (this.dataForm2.receiveId) {
          this.$http({
            url: this.$http.adornUrl(`/assets/receive/info/${row.receiveId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              console.log('data', data)
              this.dataForm2.assetsName = data.receive.assetsName  // 资产名
              this.dataForm2.userName = data.receive.userName     // 使用人
              this.dataForm2.receiveTime = data.receive.receiveTime   // 申请时间
              this.dataForm2.receiveDesc = data.receive.receiveDesc  // 申请理由
              this.dataForm2.createBy = data.receive.createBy        // 审核人
              this.dataForm2.createTime = data.receive.createTime    // 审核时间
              this.dataForm2.autitorDesc = data.receive.autitorDesc // 领用审核意见
              this.dataForm2.repairsDesc = data.receive.repairsDesc // 报修描述
              this.dataForm2.repairsTime = data.receive.repairsTime // 报修时间
              this.dataForm2.createBy2 = data.receive.createBy2 // 报修审核人
              this.dataForm2.autitorDesc2 = data.receive.autitorDesc2 // 报修意见
              this.dataForm2.createTime2 = data.receive.createTime2 // 报修审核时间
              this.dataForm2.createStatus = data.receive.createStatus // 资产状态
              this.dataForm2.repairsPic = data.receive.repairsPic
              this.dataForm2.scrapTime = data.receive.scrapTime
            }
          })
        }
      })
    }
  }
}
</script>

<style>
.wds-form-top {
  margin-top: 8px;
}
.wds-frame {
  margin-left: 15px;
  margin-right: 15px;
  border-top: 1px solid rgba(184, 194, 215, 0.4);
  border-right: 1px solid rgba(184, 194, 215, 0.4);
}
.wds-frame-l {
  position: relative;
  width: 100%;
  height: 100%;
  border-left: 1px solid rgba(184, 194, 215, 0.4);
  border-bottom: 1px solid rgba(184, 194, 215, 0.4);
}
.wds-frame-form-item .el-form-item__label {
  padding-top: 6px;
  padding-left: 4px;
  line-height: 20px !important;
  width: 130px !important;
  color: #054999;
}
.wds-bj{
  width: 140px;
//background: #fafafa;
//background-color: transparent;
  border-right: 1px solid rgba(184, 194, 215, 0.4);
  height: 100%;
  position: absolute;
  margin-top: 0px;
}
.wds-frame-form-item{
  max-height: 25px;
  padding-top: 6px;
  padding-left: 4px;
  line-height: 20px !important;
  color: #054999;
}
.layui-layer-min {
  display: none !important;
}
/deep/ .el-divider .el-divider__text {
  font-size: 18px !important;
  font-weight: 800;
}

.wds-el-row2{
  height: 120px;

}

</style>
